<template>
  <view>
    <Navbar :title="cateogryInfo.categoryName" :showLeft="showLeft">
      <template #right>
        <view class="iconfont icon-more-line" @click="showCategory"></view>
      </template>
    </Navbar>
    <view>
      <view class="question-list">
        <DataList
          :dataSource="dataSource"
          @loadData="loadDataList"
          :loadStatus="loadStatus"
        >
          <template #default="{ data }">
            <QuestionItem
              :data="data"
              :categoryId="cateogryInfo.categoryId"
            ></QuestionItem>
          </template>
        </DataList>
      </view>
      <QuestionCategory ref="questionCategoryRef" @select="selectCategory">
      </QuestionCategory>
    </view>
  </view>
</template>

<script setup>
import QuestionCategory from "./QuestionCategory.vue";
import QuestionItem from "./QuestionItem.vue";
import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
import { ref, reactive, getCurrentInstance, nextTick } from "vue";
const { proxy } = getCurrentInstance();

import { usePageOpStore } from "@/stores/pageOp";
const pageOpStore = usePageOpStore();

const props = defineProps({
  showLeft: {
    type: Boolean,
    default: true,
  },
});

const cateogryInfo = ref({
  categoryId: "0",
  categoryName: "全部分类",
});
const dataSource = ref({});
const loadStatus = ref(null);
const loadDataList = async () => {
  loadStatus.value = "loading";
  let result = await proxy.Request({
    url: proxy.Api.loadQuestion,
    showLoading: false,
    params: {
      categoryId: cateogryInfo.value.categoryId,
      pageNo: dataSource.value.pageNo || 1,
    },
  });
  if (!result) {
    return;
  }
  loadStatus.value = "more";
  dataSource.value = result.data;
};

//分类选择
const questionCategoryRef = ref();
const showCategory = () => {
  questionCategoryRef.value.show(cateogryInfo.value);
};
const selectCategory = (category) => {
  cateogryInfo.value = Object.assign({}, category);
  loadDataList();
};

onLoad((options) => {
  if (Object.keys(options).length > 0) {
    let { categoryId, categoryName } = options;
    categoryName = decodeURIComponent(categoryName);
    cateogryInfo.value = {
      categoryId,
      categoryName,
    };
  }
  loadDataList();
});

onShow(() => {
  pageOpStore.setOp(true, true);
});

onReachBottom(() => {});
</script>

<style lang="scss" scoped>
.icon-more-line {
  text-align: right;
  font-size: 20px;
}
</style>
